<!--  
查看运行SQL信息 DLG
通过调用子控件方法,弹出窗口,并传递参数,对父控件改动较小
调用方式
引入 
  import SQLInfoDlg from '@/components/AIT/RunTimeDlg/SQLInfo';
  components: { SQLInfoDlg },
模板
  <SQLInfoDlg ref="SQLInfoDlg"></SQLInfoDlg>
方法
  handleSQLInfo() {
    // 通过调用子控件方法,弹出窗口,并传递参数
    this.$refs.SQLInfoDlg.openDlg(this.flowCode);
  },
-->
<template>
  <el-dialog :title="title" :visible.sync="isShow" width="80%" append-to-body>
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      label-width="80px"
      @submit.native.prevent
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="流程编码" prop="flowCode">
            {{ form.flowCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="流程名称" prop="flowName">
            {{ form.flowName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <pre style="margin-top: -16px">
            <code style="height: 430px;" class="hljs" v-html="highlightedCode(form.sqlInfo)"/>
          </pre>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCopy" icon="el-icon-copy-document" type="info"
        >拷 贝</el-button
      >
      <el-button @click="closeDlg" icon="el-icon-circle-close" type="info"
        >关 闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import copy from "copy-to-clipboard";
import { loadRunSQLInfo } from "@/api/aitcommon/aitconfig";
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/vs2015.css";
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

export default {
  name: "SQLInfoDLG",
  data() {
    return {
      isShow: false,
      loading: false,
      title: "流程运行信息",
      form: {},
    };
  },
  methods: {
    // 高亮代码
    highlightedCode(text) {
      let ret = hljs.highlight("sql", text || "");
      return ret.value;
    },
    // 通过函数打开对话框,子控件参数也通过函数传入
    // 相比通过属性传入参数,这种做法代码简单
    // 打开对话框
    openDlg(code, callBack = () => {}) {
      this.form.flowCode = code;
      this.callBack = callBack;
      this.isShow = true;
      this.loadData();
    },
    // 关闭对话框
    closeDlg() {
      this.isShow = false;
      this.reset();
      this.callBack();
    },
    // 加载运行信息
    loadData() {
      if (!this.isShow) return;
      this.loading = true;
      // console.info('loadData1',this.form)
      loadRunSQLInfo(this.form.flowCode)
        .then((res) => {
          // 返回可能是空,flowCode必须有值
          this.form = { ...res.data };
          // console.info("loadData2", this.form);
        })
        .finally((res) => {
          this.loading = false;
        });
    },
    // 拷贝至粘贴板
    handleCopy() {
      if (this.form.sqlInfo) {
        copy(this.form.sqlInfo);
        this.$message("内容已拷贝至粘贴板!");
      }
    },
    reset() {
      let flowCode = this.form.flowCode;
      this.form = { flowCode };
    },
  },
};
</script>

<style></style>
